<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

<body>
    <!-- 
        Bootstrap提供了一些表单控件样式、布局选项，以及用来创建广泛多样化的的表单的自定义组件，以下是示例和使用指南。
    -->

    <div class="container">
        <form action="">
            <!-- 
                文本框定义
                外层的div样式class="form-group"
                输入项样式： class="form-control"

                placeholder：HTML5规范定义的属性，可以在文本框中显示提示信息
                small：添加提示信息的
            -->
            <div class="form-group">
                <label for="exampleInputUserName">用户名</label>
                <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                    placeholder="请输入用户名">
            </div>

            <div class="form-group">
                <label for="exampleInputUserPwd">密码</label>
                <input type="password" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                    placeholder="请输入密码">
            </div>

            <hr />
            <!-- 
                radio：单选框样式
                外层的div样式class="form-check"
                输入项样式： class="form-check-input"
                disabled：不可选状态
                checked：默认选中状态
             -->
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                <label class="form-check-label" for="defaultCheck1">
                    男
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
                <label class="form-check-label" for="defaultCheck2">
                    女
                </label>
            </div>

            <hr />
            <!-- 
                checkbox：复选框
                外层的div样式class="form-check"
                输入项样式： class="form-check-input"
                disabled：不可选状态
                checked：默认选中状态
             -->
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
                <label class="form-check-label" for="defaultCheck1">
                    打篮球
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
                <label class="form-check-label" for="defaultCheck2">
                    羽毛球
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" checked>
                <label class="form-check-label" for="defaultCheck2">
                    乒乓球
                </label>
            </div>
            <hr />
            <!-- 
                下拉菜单：
                外层的div样式class="form-group"
                select的样式class="custom-select"  在最右边显示上下箭头
                select的样式class="custom-select"  在最右边显示下箭头
                selected：默认选中
             -->
            <div class="form-group">
                <select class="custom-select">
                    <option selected>Open this select menu</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>

                <select class="form-control">
                    <option>请选择</option>
                    <option value="1">One</option>
                    <option value="2">Two</option>
                    <option value="3">Three</option>
                </select>
            </div>

            <!-- 
                文本域(了解)
                    class="form-group"
             -->
            <div class="form-group">
                <label for="exampleFormControlTextarea1">Example textarea</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
            <hr />

            <input type="file" name="filename">
            <hr />
            <!-- 
                文件上传项
             -->
            <form>
                <div class="form-group">
                    <label for="exampleFormControlFile1">请上传文件</label>
                    <input type="file" class="form-control-file" id="exampleFormControlFile1">
                </div>
            </form>
            <hr />
            <div class="custom-file">
                <input type="file" class="custom-file-input" id="validatedCustomFile">
                <label class="custom-file-label" for="validatedCustomFile">请选择文件</label>
            </div>
            <hr />
            <button type="submit" class="btn btn-primary">提交</button>


        </form>
    </div>
</body>

</html>